<template>
  <el-dialog v-model="visible" title="保证金记录" width="800px" class="deposit-dialog">
    <el-table :data="tableData" border style="width: 100%" header-row-class-name="custom-header">
      <el-table-column prop="id" label="序号" width="60" align="center" />
      <el-table-column prop="penaltyAmount" label="保证金金额" width="120" align="center">
        <template #default="{ row }">
          <span v-if="row.penaltyAmount">￥</span>
          {{ row.penaltyAmount }}
        </template>
      </el-table-column>
      <el-table-column prop="creatorState" label="动作" width="100" align="center">
        <template #default="{ row }">
          <!-- 0-扣除 1-退回 2-冻结 3-缴纳 -->
          <span>{{ ["扣除", "退回", "冻结", "缴纳"][Number(row.creatorState)] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="时间" width="180" align="center" />
      <el-table-column prop="penaltyAmount" label="金额" width="120" align="center">
        <template #default="{ row }">
          <span v-if="row.penaltyAmount">￥</span>
          {{ row.penaltyAmount }}
        </template>
      </el-table-column>
      <el-table-column prop="noticeContent" label="备注" align="center" />
    </el-table>
    <el-pagination
      v-if="total > 0"
      :current-page="queryParams.current"
      :page-size="queryParams.size"
      :total="total"
      small
      background
      layout="prev, pager, next"
      class="mt-4"
      style="display: flex; justify-content: flex-end"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "DepositCheck",
};
</script>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { getDepositInfo } from "@/api/dashboard/index";
import { ElMessage } from "element-plus";
import { getUserBizId } from "@/utils/auth"; //获取userBizId

// 类型定义
/**/
interface DepositRecord {
  creatorState: number;
  createTime: string;
  noticeContent?: string;
  penaltyAmount: number;
}

/*保证金数据列表*/
interface ApiResponse {
  code: number;
  data: {
    records: DepositRecord[];
    total: number;
  };
  message?: string;
}

/*分页器*/
interface QueryParams {
  current: number;
  size: number;
  userBizId: string | number;
}

// 状态管理
const visible = ref(false);
const loading = ref(false);
const tableData = ref([]);
// const tableData = ref<
//   Array<{
//     id: number;
//     penaltyAmount: number;
//     creatorState: string;
//     time: string;
//     amount: number;
//     remark: string;
//   }>
// >([]);
const total = ref();

const queryParams = reactive<QueryParams>({
  current: 1, //保证金记录分页查询
  size: 10,
  userBizId: getUserBizId(), //获取userBizId
});

// 分页处理
const handleCurrentChange = (newPage: number) => {
  queryParams.current = newPage;
  loadData();
};

// 核心数据加载方法
const loadData = async () => {
  loading.value = true;
  visible.value = true;
  // const response = (await getDepositInfo()) as unknown as ApiResponse;
  let params = {
    current: queryParams.current,
    size: queryParams.size,
    userBizId: queryParams.userBizId,
  };

  getDepositInfo(params)
    .then((res) => {
      console.log(res, "res");
      tableData.value = res.records;
      total.value = res.total;
    })
    .catch((err) => {
      ElMessage.error("数据加载失败，请稍后重试");
      loading.value = false;
    });
};
// const loadData = async () => {
//   try {
//     loading.value = true;
//     visible.value = true;
//     const response = (await getDepositInfo({
//       current: queryParams.current,
//       size: queryParams.size,
//       userBizId: queryParams.userBizId,
//     })) as unknown as ApiResponse;
//     console.log(response, "1111111");

//     // tableData.value = response.data.records.map((item, index) => ({
//     //   id: (queryParams.current - 1) * queryParams.size + index + 1,
//     //   penaltyAmount: item.penaltyAmount,
//     //   creatorState: item.operateType === 1 ? "缴纳" : "扣除",
//     //   time: formatTime(item.createTime),
//     //   amount: item.amount,
//     //   remark: item.remarks || "无",
//     // }));
//     console.log("1111111");
//     tableData.value = response.data;
//     console.log(tableData.value, "表单数据");
//     total.value = response.data.total;
//   } catch (error) {
//     ElMessage.error("数据加载失败，请稍后重试");
//     console.error("接口请求错误:", error);
//   } finally {
//     loading.value = false;
//   }
// };

// 时间格式化方法
const formatTime = (timestamp: string | number) => {
  try {
    return new Date(timestamp).toLocaleString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    });
  } catch (e) {
    return "无效时间";
  }
};

// 暴露给父组件调用
// const show = async (params: { userBizId: string; penaltyAmount: number }) => {
//   try {
//     visible.value = true;
//     // 初始化查询参数
//     // queryParams.userBizId = params.userBizId;
//     queryParams.current = 1;
//     await loadData();
//   } catch (error) {
//     ElMessage.error("初始化失败");
//     console.error("初始化错误:", error);
//   }
// };

defineExpose({ loadData });
</script>

<style lang="scss" scoped>
.deposit-dialog {
  display: flex;
  width: 600px;
  /* 表格整体样式 */
  :deep(.el-table) {
    --el-table-border-color: #ebeef5;
    --el-table-header-bg-color: #f5f7fa;
  }

  /* 表头样式 */
  :deep(.custom-header) {
    th {
      color: #606266;
      font-weight: 600;
      border-bottom: 2px solid #ebeef5 !important;
      border-right: 0 !important;
    }
  }

  /* 单元格样式 */
  :deep(.el-table td) {
    border-bottom: 1px solid #ebeef5;
    border-right: 0 !important;
    padding: 12px 0;
  }

  /* 最后一行底部边框 */
  :deep(.el-table__row:last-child td) {
    border-bottom: 0;
  }

  /* 表格外边框调整 */
  :deep(.el-table--border) {
    border: 0;
    &::after {
      width: 0;
    }
  }
  .mt-4 {
    padding-left: 500px;
  }
}
</style>
